<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>我道</title>
    <meta name="description" content="我叫1900，普通男青年，学过三年编程。湖南人，现在在四川工作。2015年花了26天骑过一次318。有点伪文艺，喜欢比较玄学的东西。性格多变，疑似有人格分裂。" />

    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="favicon.ico">

    <link rel="stylesheet" type="text/css" href="/css/screen.css" />
    <link rel="stylesheet" href="/css/iDisqus.min.css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/monokai-sublime.css">


</head>
<body class="home-template" id="s-top">

    <div class="nav">
<div class="nav_body">
  <div class="b_logo"> 
      <a class="blog-logo" href="/"><img src="/img/logo-mini.png" alt="我道" /></a>
  </div>
  <div class="b_class"> 
    <ul>
    	/ || 首页

        <li class="nav-"><a class="" href="/rss">订阅</a></li>

    </ul>
  </div>
</div>
</div>
    <div class="post-bg" style="background-image: url(http://cdn.4zen.top/wp-content/uploads/2016/08/sp160803_182808.png);"></div>
<div class="site-wrapper" page-type="c-post">
<main class="content" role="main">
	<div class="post-toppic" style="">
        <div class="picbox">
          <img node-type="articleHeaderPic" src="http://cdn.4zen.top/wp-content/uploads/2016/08/sp160803_182808.png">
        </div>
     </div>
    <article class="post">

        <header class="post-header">
            <h1 class="post-title">js字体子集服务：Fontmin</h1>
            <section class="post-meta">
                <time class="post-date" datetime="Thu Aug 04 2016 10:38:02 GMT+0800">2016/8/4</time> [object Object]
            </section>
        </header>

        <section class="post-content">
            <p>Fontmin是百度EFE推出的一个前端项目，是使用js动态生成精简化的字体子集提高载入速度，让既漂亮又臃肿的中文字库也可以拿到web网页上来使用。</p>
<p>目前准备拿到自己的网站上来试试，看能不能把文章主题标题使用上这个功能。</p>
<p>这是一个简单的DEMO。</p>
<p>See the Pen <a href="http://codepen.io/firede/pen/raEXBX/" target="_blank" rel="external">Fontmin Example</a> by Firede (<a href="http://codepen.io/firede" target="_blank" rel="external">@firede</a>) on <a href="http://codepen.io" target="_blank" rel="external">CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

<p>如何使用<br> var srcPath = ‘src/font/*.ttf’; // 字体源文件<br> var destPath = ‘asset/font’; // 输出路径<br> var text = ‘我说你是人间的四月天；笑响点亮了四面风；轻灵在春的光艳中交舞着变。’;</p>
<p>// 初始化<br> var fontmin = new Fontmin()<br> .src(srcPath) // 输入配置<br> .use(Fontmin.glyph({ // 字型提取插件<br> text: text // 所需文字<br> }))<br> .use(Fontmin.ttf2eot()) // eot 转换插件<br> .use(Fontmin.ttf2woff()) // woff 转换插件<br> .use(Fontmin.ttf2svg()) // svg 转换插件<br> .use(Fontmin.css()) // css 生成插件<br> .dest(destPath); // 输出配置</p>
<p>// 执行<br> fontmin.run(function (err, files, stream) {</p>
<p>if (err) { // 异常捕捉<br> console.error(err);<br> }</p>
<p>console.log(‘done’); // 成功<br> });<br> Fontmin 提供了 Node.js 模块和客户端 2 种使用方法，具体介绍请移步 <a href="http://efe.baidu.com/blog/fontmin-getting-started/" target="_blank" rel="external">Fontmin 快速指南</a>。</p>
<p>Fontmin：<a href="https://www.npmjs.com/package/fontmin" target="_blank" rel="external">Node.js 模块</a> | <a href="https://github.com/ecomfe/fontmin-app/releases/download/v0.2.0/Fontmin-v0.2.0-win64.zip" target="_blank" rel="external">Windows 客户端</a> | <a href="https://github.com/ecomfe/fontmin-app/releases/download/v0.2.0/Fontmin-v0.2.0-osx64.zip" target="_blank" rel="external">OS X 客户端</a> | <a href="http://ecomfe.github.io/fontmin/" target="_blank" rel="external">GitHub</a></p>

        </section>

        <footer class="post-footer">

            <figure class="author-image">
                <a class="img" href="" style="background-image: url(/img/avatar.png)"><span class="hidden">的头像</span></a>
            </figure>


            <section class="author">
                <h4><a href=""></a></h4>

                    <p>我叫1900，普通男青年，学过三年编程。湖南人，现在在四川工作。2015年花了26天骑过一次318。有点伪文艺，喜欢比较玄学的东西。性格多变，疑似有人格分裂。</p>

                    <p>继续阅读此作者的<a href="http://www.4zen.top">更多文章</a>。</p>

                <div class="author-meta">
                    <span class="author-location icon-location">自贡</span>
                    <span class="author-link icon-link"><a href="http://www.4zen.top">http://www.4zen.top</a></span> 
                </div>
            </section>


            <section class="share">
                <h4>分享此博文</h4>
                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

            </section>

        </footer>
	<div id="comment"></div>
    </article>

</main>
    <aside class="read-next">
        
        <a class="read-next-story" style="background-image: url(http://cdn.4zen.top/wp-content/uploads/2016/08/4.png)" href="/new-domain-name-4zen-top-for-the-record-success/">
            <section class="post">
                <h2>新域名4zen.top备案成功</h2>
                <p>新注册的域名备案终于下来了，打算把服务器转到国内。国外的服务器总感觉速度各方面都要差一点。

历时17天。

&hellip;</p>
            </section>

        </a>
        
        
        <a class="read-next-story prev " style="background-image: url(http://cdn.4zen.top/wp-content/uploads/2016/08/图形1-1.png" href="/register-a-new-domain-name-a-new-logo/">
            <section class="post">
                <h2>注册了一个新域名，做了一个新LOGO</h2>
                <p>注册了一个新域名4ZEN.top正在备案中，备案完就正式用上了。
乘着审核的时间做了一个LOGO。
&hellip;</p>
            </section>
        </a>
        
    </aside>

    </div>

    <div class="sidebar">  
        <a href="#s-top" class="s-top" to="#s-top"><i class="fa fa-chevron-up" action-type="goTop"></i></a>
    </div>

    <footer class="site-footer clearfix">
        <section class="copyright"><a href="">我道</a> &copy; </section>
        <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a> &amp; <a href="http://www.ghostchina.com">GhostChina</a></section>
    </footer>

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="/js/plugin.js"></script>
    <script src="/js/index.js"></script>

</body>
</html>
